<template>
  <div class="consultBtn">
    <styleSolt @saveFun="saveFun" :isShowSaveAs="isShowSaveAs">
      <template slot="content">
        <windowStyle class="windowStyle">
          <template slot="content">
            <!-- <el-tooltip class="item" :disabled="!cnsultBtnForm.isOpenPromptMsg" effect="dark"
              :content="cnsultBtnForm.promptMsg" :placement="cnsultBtnForm.consultButtonLocation === 'right' ? 'right' : 'left'"> -->
              <div class="contentBox"
                :style="{
                  right: cnsultBtnForm.consultButtonLocation === 'right' ? cnsultBtnForm.sideMargin + 'px' : '',
                  left: cnsultBtnForm.consultButtonLocation === 'left' ? cnsultBtnForm.sideMargin + 'px' : '',
                  bottom: cnsultBtnForm.bottomMargin + 'px'}">
                  <div class="contentImgBox" v-if="initConfig && cnsultBtnForm.consultButtonIcon" :style="{backgroundColor: cnsultBtnForm.consultButtonColor}">
                    <img :src="initConfig + cnsultBtnForm.consultButtonIcon" alt="" class="contentImg">
                  </div>
                  <span class="contentAgentImg agentImg V7_iconfont V7_iconV7tubiao_zixunanniu" v-else :style="{color: cnsultBtnForm.consultButtonColor}"></span>
              </div>
            <!-- </el-tooltip> -->
          </template>
        </windowStyle>
      </template>
      <template slot="edit">
        <el-form class="m7-form cnsultBtnForm"
          size="mini" :model="cnsultBtnForm"
          ref="cnsultBtnForm" label-position="top">
          <el-form-item prop="img">
            <span slot="label">
              咨询按钮图标
              <span class="adviceColor">（建议尺寸：26*26）</span>
            </span>
            <img class="agentImg" v-if="initConfig && cnsultBtnForm.consultButtonIcon"
               :style="{border: '1px solid' + cnsultBtnForm.consultButtonColor}"
               :src="initConfig + cnsultBtnForm.consultButtonIcon" alt="">
            <span class="agentImg V7_iconfont V7_iconV7tubiao_zixunanniu" v-else></span>
            <el-upload
              class="upLoad"
              :show-file-list="false"
              accept=".jpg, .gif, .png, .bmp"
              action=""
              :on-success="uploadSuccess"
              :on-error="uploadError"
              :before-upload="beforeUpload"
              :http-request="uploadRequest">
              <span>上传图片</span>
            </el-upload>
            <span v-if="initConfig && cnsultBtnForm.consultButtonIcon">
              <span class="line"></span>
              <span class="delImg" @click="delSystemImgFun({imgUrl: cnsultBtnForm.consultButtonIcon, type: 'consultButtonIcon'})">删除</span>
            </span>
          </el-form-item>
          <!-- <el-form-item label="开启提示语" prop="isOpenPromptMsg">
            <el-switch v-model="cnsultBtnForm.isOpenPromptMsg" active-color="#008BEE"></el-switch>
          </el-form-item>
          <el-form-item label="提示语" prop="promptMsg" v-if="cnsultBtnForm.isOpenPromptMsg">
            <el-input v-model.trim="cnsultBtnForm.promptMsg" placeholder="请输入提示语" size="mini"></el-input>
          </el-form-item> -->
          <el-form-item label="皮肤配色" prop="consultButtonColor">
            <el-color-picker class="colorChoose" size="small" @change="colorChange" v-model="cnsultBtnForm.consultButtonColor"></el-color-picker>
            <el-input class="colorIpt" v-model.trim="cnsultBtnForm.consultButtonColor" :disabled="true" size="mini"></el-input>
          </el-form-item>
          <!-- <el-form-item label="咨询按钮位置" prop="consultButtonLocation">
            <el-radio v-model="cnsultBtnForm.consultButtonLocation" label="right">底边右侧</el-radio>
            <el-radio v-model="cnsultBtnForm.consultButtonLocation" label="left">底边左侧</el-radio>
          </el-form-item>
          <el-form-item label="侧边距" prop="sideMargin">
            <el-input v-model.trim="cnsultBtnForm.sideMargin" placeholder="请输入侧边距" size="mini">
              <template slot="append">像素</template>
            </el-input>
          </el-form-item>
          <el-form-item label="底边距" prop="bottomMargin">
            <el-input v-model.trim="cnsultBtnForm.bottomMargin" placeholder="请输入底边距" size="mini">
              <template slot="append">像素</template>
            </el-input>
          </el-form-item> -->
        </el-form>
      </template>
    </styleSolt>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { uploadQiniu } from '@/utils/upload'
import windowStyle from '@/components/windowStyle/index.vue'
import styleSolt from '@/views/config/webchat/channel/base/styleSolt.vue'
import { deepClone } from '@/utils/common'
import { CommonModule } from '@/store/modules/common'
interface ConsultBtnObj {
  consultButtonIcon: string,
  promptMsg: string,
  isOpenPromptMsg: string,
  consultButtonColor: string
}
const cnsultBtnFormTem = {
  consultButtonIcon: '',
  promptMsg: '',
  consultButtonColor: '#008bee',
  // sideMargin: '20',
  // bottomMargin: '20',
  isOpenPromptMsg: false
  // consultButtonLocation: 'right'
}
@Component({
  name: 'consultBtn',
  components: { windowStyle, styleSolt }
})
export default class ConsultBtn extends Vue {
  @Prop({ type: Boolean, default: () => false }) private isShowSaveAs
  private $message: any
  private $store: any
  private $bus: any
  private initConfig: string = ''

  public cnsultBtnForm: any = {
    consultButtonIcon: '', // 咨询按钮icon
    promptMsg: '', // 提示语
    consultButtonColor: '#008bee', // 咨询按钮背景色
    // sideMargin: '20',
    // bottomMargin: '20',
    isOpenPromptMsg: false // 是否开启提示语
    // consultButtonLocation: 'right'
  }

  private fileName = '' // 文件名

  private uploadSuccess (data: any) { // 文件上传成功
    this.cnsultBtnForm.consultButtonIcon = data.key ? `/${data.key}` : ''
  }

  private uploadError () { // 文件上传失败
    this.$message({ message: '图片上传失败，请重新选择图片上传', type: 'error' })
  }

  private colorChange (val: any) { // 颜色选择器
    if (val === null) {
      this.cnsultBtnForm.consultButtonColor = '#008bee'
    }
  }

  private beforeUpload (file: any) { // 文件上传之前
    this.fileName = file.name.replace(/\s/g, '') // 去掉文件名的空格
    if (file.size / 1024 / 1024 > 3) {
      this.$message({ message: '头像大小不能超过3M', type: 'error' })
      return false
    }
  }

  private delSystemImgFun (obj: any) {
    const sendData = { data: [{ key: obj.imgUrl, bucket: 'v7-fs-im' }] }
    const actionData = { url: '/base/action/qiniu/delete', method: 'POST', data: sendData }
    CommonModule.publicAction(actionData).then(res => {
      if (res && res.success) {
        this.cnsultBtnForm[obj.type] = ''
      }
    })
  }

  private uploadRequest (request: any) { // 七牛上传
    uploadQiniu({ type: 'im', fileName: this.fileName }, request)
  }

  private setConsultBtnData (data?: ConsultBtnObj) {
    if (data) {
      const { consultButtonIcon, promptMsg, isOpenPromptMsg, consultButtonColor } = data
      this.cnsultBtnForm = {
        consultButtonColor, // 咨询按钮背景色
        consultButtonIcon, // 咨询按钮icon
        promptMsg, // 提示语内容
        // sideMargin,
        // bottomMargin,
        isOpenPromptMsg // 是否开启提示语
        // consultButtonLocation
      }
    } else {
      this.cnsultBtnForm = deepClone(cnsultBtnFormTem)
    }
  }

  private saveFun () { // 保存事件
    this.$emit('saveFun')
  }

  private mounted () {
    this.$bus.$on('styleEditConsultBtn', (res: ConsultBtnObj) => {
      if (res) {
        this.setConsultBtnData(res)
      } else {
        this.setConsultBtnData()
      }
    })
    const config = this.$store.state.common.initConfig
    this.initConfig = config ? config.qiniuDomainMap.im : ''
  }

  private beforeDestroy () {
    this.$bus.$off('styleEditConsultBtn')
  }
}
</script>
<style lang="stylus" scoped>
  .consultBtn
    height 100%
    .windowStyle
      position relative
      .contentBox
        width 56px
        height 56px
        right 50px
        bottom 50px
        border-radius 50%
        position absolute
        text-align center
        line-height 56px
    .agentImg
      border-radius 50%
      display inline-block
      vertical-align middle
      width 40px
      height 40px
      margin-bottom 5px
    .agentImg.V7_iconfont
      font-size 40px
      color #008BEE
      line-height 40px
      vertical-align middle
    .contentAgentImg
      color white
    .contentImg
      width 30px
      height 30px
      margin 13px
      border-radius 50%
    .upLoad
      display inline-block
      margin-left 10px
      span
        font-size 12px
        color #008BEE
    .colorIpt
      display inline-block
      width 80px
      margin-left 10px
      vertical-align middle
    .colorChoose
      vertical-align middle
    .contentImgBox
      width inherit
      height inherit
      text-align center
      line-height inherit
      border-radius 50%
    .delImg
      font-size 12px
      color #FC6B5C
      margin-left 9px
      display inline-block
      cursor pointer
    .adviceColor
      color #767E91
    .line
      width 1px
      height 9px
      background #008BEE
      margin-left 9px
      opacity 0.3
      display inline-block
</style>
